<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymelaf.orgh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Blogs/归档</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/css/commons.css}"/>
    <link rel="stylesheet" th:href="@{/css/filing.css}"/>
</head>
<body>

<div th:replace="commons/bar::#header(activeUrl='filing.html')"></div>

<div class="container" id="app" style="width: 60%;margin-bottom: 100px;">
    <div class="navbar main-title list-group-item">
        <span class="navbar-left main-title-left">归档</span>
        <div class="navbar-right main-title-right">共<span >{{blogsFiling.total}}</span>年</div>
    </div>

    <div v-for="(filing,index) in blogsFiling.list" >
        <div class="text-center year">
            <span >{{filing.year}}</span>
        </div>
        <div class="list-group-item filler-body" v-for="(blogs,index2) in filing.blogsList" @click="details(blogs.id)">
            <span class="title" style="overflow: hidden;width: 50%; float: left; height: 25px; line-height: 25px;">{{blogs.title}}</span>
            <span class="time label ">{{blogs.time}}</span>
            <span class="label label-span navbar-right">原创</span>
        </div>
    </div>

</div>




<div th:replace="commons/bar::#footer"></div>


<script th:src="@{/js/jquery.min.js}"/>
<script type="application/javascript" th:src="@{/lib/vue/vue.min.js}"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script th:src="@{/js/bootstrap.min.js}"></script>


<script>

    var vue = new Vue({
        el:"#app",
        data(){
            return{
                blogsFiling:[]
            }
        },
        methods:{
            ajax:function(method,url,data,back){
                var that = this;
                $.ajax({
                    type:method,
                    url:url,
                    dataType:"json",
                    contentType:"application/json;charset=utf-8",
                    data:data,
                    success:function(res){
                        back(res);
                    },
                    error:function(res){
                        console.log(res);
                    }
                })
            },
            details:function(id){
                window.location.href="details.html?active="+id;
            },
        },
        created(){
            var that = this;
            this.ajax("get","/blogs/blogs/filing",{page:1,size:5},function(res){
                console.log(res);
                that.blogsFiling = res;
            })
        }
    })

</script>

</body>
</html>